import React from 'react';
import IndexStyle from '../style/index.scss';

export default class Home extends React.Component {
    render(){
        return(
            <div id={IndexStyle.footer}>
                <div className={IndexStyle.base}>
                    <ul className={`${IndexStyle.list_inline} ${IndexStyle.footer_t}`}>
                        <li className={IndexStyle.footer_download}>
                            <h3 className={IndexStyle.footer_tit}>下载QQ音乐客户端</h3>
                            
                            <ul className={`${IndexStyle.footer_list_item} ${IndexStyle.clear}`}>
                                <li>
                                    <a href="javascript:;"><i className={IndexStyle.icon_pc}></i>PC版</a>
                                </li>
                                <li>
                                    <a href="javascript:;"><i className={IndexStyle.icon_mac}></i>MAC版</a>
                                </li>
                                <li>
                                    <a href="javascript:;"><i className={IndexStyle.icon_android}></i>安卓版</a>
                                </li>
                                <li>
                                    <a href="javascript:;"><i className={IndexStyle.icon_iphone}></i>iPhone版</a>
                                </li>
                            </ul>
                        </li>
                        <li className={IndexStyle.footer_project}>
                            <h3 className={IndexStyle.footer_tit}>特色产品</h3>
                            <ul className={`${IndexStyle.footer_list_item} ${IndexStyle.clear} ${IndexStyle.footer_product_list}`}>
                                <li className={`${IndexStyle.footer_project_list_item} ${IndexStyle.footer_project_p}`}>
                                    <a href="javascript:;"><i className={IndexStyle.icon_kg}></i>全民K歌</a>
                                </li>
                                <li className={`${IndexStyle.footer_project_list_item} ${IndexStyle.footer_project_p}`}>
                                    <a href="javascript:;"><i className={IndexStyle.icon_ss}></i>Super South</a>
                                </li>
                                <li className={`${IndexStyle.footer_project_list_item} ${IndexStyle.footer_project_p}`}>
                                    <a href="javascript:;"><i className={IndexStyle.icon_qp}></i>QPlay</a>
                                </li>
                                <li className={IndexStyle.footer_project_list_item}>
                                    <a href="javascript:;">QQ音乐原创音乐平台</a>
                                </li>
                                <li className={IndexStyle.footer_project_list_item}>
                                    <a href="javascript:;">上传视频</a>
                                </li>
                                <li className={IndexStyle.footer_project_list_item}>
                                    <a href="javascript:;">车载互联</a>
                                </li>
                                <li className={IndexStyle.footer_project_list_item}>
                                    <a href="javascript:;">QQ演出</a>
                                </li>

                            </ul>
                        </li>
                        <li className={IndexStyle.footer_link}>
                            <h3 className={IndexStyle.footer_tit}>合作链接</h3>

                            <ul className={`${IndexStyle.footer_list_item} ${IndexStyle.clear} ${IndexStyle.footer_link_list}`}>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">CJ E&M</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">腾讯视频</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">手机QQ空间</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">最新版QQ</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">腾讯社交广告</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">电脑管家</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">QQ浏览器</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">画报</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">黄钻活动</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">星钻</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">腾讯微云</a></li>
                                <li className={IndexStyle.footer_link_list_item}><a href="javascript:;">更多</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div className={IndexStyle.footer_b}>
                        <p>
                            <a href="javascript:;">关于腾讯</a>&nbsp;
                            | &nbsp;
                            <a href="javascript:;">About Tencent</a>&nbsp;
                            | &nbsp;
                            <a href="javascript:;">服务条款</a>&nbsp;
                            | &nbsp;
                            <a href="javascript:;">用户服务协议</a>&nbsp;
                            | &nbsp;
                            <a href="javascript:;">隐私政策</a>&nbsp;
                            | &nbsp;
                            <a href="javascript:;">广告服务</a>&nbsp;
                            | &nbsp;
                            <a href="javascript:;">腾讯招聘</a>&nbsp;
                            | &nbsp;
                            <a href="javascript:;">客服中心</a>&nbsp;
                            | &nbsp;
                            <a href="javascript:;">网站导航</a>
                        </p>
                        <p>
                            Copyright © 1998 - 2017
                            Tencent.&nbsp;
                            <a href="javascript:;">All Rights Reserved.</a>
                        </p>
                        <p>
                            腾讯公司&nbsp;
                            <a href="javascript:;">版权所有</a>&nbsp;
                            <a href="javascript:;">腾讯网络文化经营许可证</a>
                        </p>
                    </div>
                </div>
            </div>
        )
    }
}